<template>
  <div class="register-data">
    <data-header></data-header>

    <div class="chart-box">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :lg="14">
          <!--折线图-->
          <div class="line-chart">
            <div class="chart-title">注册人员情况</div>

            <div class="time-type">
              <span @click="select(1)" class="time-block" :class="{'positive':positiveType===1}">日</span>
              <span @click="select(2)" class="time-block" :class="{'positive':positiveType===2}">周</span>
              <span @click="select(3)" class="time-block" :class="{'positive':positiveType===3}">月</span>
            </div>

            <line-chart :impChartData="impData"></line-chart>
          </div>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="10">
          <div class="pie-chart">
            <div class="chart-title">注册来源比例</div>
            <pie-chart :pieData="pieData"/>

          </div>

          <div class="pie-chart-data">
            <div class="pie-chart-data-legend1">
              <div class="pie-chart-cell-box">
                <span class="pie-chart-cell-color"></span>
                <span class="pie-chart-cell-title">自发注册：<strong>{{selfPeople}}人</strong></span>
              </div>
              <div class="pie-chart-cell-box">
                <span class="pie-chart-cell-color cell-color3"></span>
                <span class="pie-chart-cell-title">驻厂邀请：<strong>{{stationPeople}}人</strong></span>
              </div>
              <div class="chart-total">系统用户总人数：<strong>{{pieTotal}}人</strong></div>
            </div>
            <div class="pie-chart-data-legend2">
              <div class="pie-chart-cell-box">
                <span class="pie-chart-cell-color cell-color2"></span>
                <span class="pie-chart-cell-title">业务员邀请：<strong>{{businessPeople}}人</strong></span>
              </div>
              <div class="pie-chart-cell-box">
                <span class="pie-chart-cell-color cell-color4"></span>
                <span class="pie-chart-cell-title">普通员工邀请：<strong>{{empPeople}}人</strong></span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import DataHeader from "../components/DataHeader";
  import LineChart from "../components/LineChart";
  import PieChart from "../components/PieChart";
  import {formatDate} from "@/utils/index";
  import {getSysLineData, getSysPieData} from "../../../api/user/user";

  export default {
    name: "registerData",
    components: {
      DataHeader,
      LineChart,
      PieChart
    },
    data() {
      return {
        chartData: {
          day: {
            xData: [],
            spontaneousData: [],
            salesmanData: [],
            residentData: [],
            employeeData: []
          },
          week: {
            xData: [],
            spontaneousData: [],
            salesmanData: [],
            residentData: [],
            employeeData: []
          },
          month: {
            xData: [],
            spontaneousData: [],
            salesmanData: [],
            residentData: [],
            employeeData: []
          }
        },
        positiveType: 1,
        impData: {},
        pieData: {
          legendData: ['自发注册', '业务员邀请', '驻厂邀请', '普通员工邀请'],
          seriesData: [],
          colorData: ['#3CAFFF', '#1ED7DE', '#08CC84', '#FFCB3D']
        },
        pieTotal: 0,
        selfPeople: 0,
        businessPeople: 0,
        stationPeople: 0,
        empPeople: 0,
      }
    },
    created() {
      this.getLineData(this.positiveType);
      this.getPieData();
    },
    methods: {
      getPieData() {//获取pie数据
        getSysPieData().then((res) => {
          let retObj = res;
          if (retObj.code == 0 && retObj.data != null) {
            let pieObj = retObj.data;

            if (pieObj.length > 0) {
              this.pieTotal = retObj.data[0].pieTotal;
              for (let pie in pieObj) {
                let tempPie = {};
                tempPie.name = this.changePieName(pieObj[pie].type, pieObj[pie].num);
                tempPie.value = pieObj[pie].num;
                this.pieData.seriesData.push(tempPie);
              }
            }
          }
        })
      },
      select(type) {
        this.positiveType = type;
        this.getLineData(this.positiveType);
      },
      changePieName(type, value) {
        let name = '';
        if (type == -1) {
          name = '自发注册';
          this.selfPeople = value;
        } else if (type == 0) {
          name = '普通员工邀请';
          this.empPeople = value;
        } else if (type == 3) {
          name = '业务员邀请';
          this.businessPeople = value;
        } else if (type == 4) {
          name = '驻厂邀请';
          this.stationPeople = value;
        }
        return name;
      },
      getLineData(type) {//获取折线图数据
        getSysLineData(type).then((res) => {
          let retObj = res;
          if (retObj.code == 0 && retObj.data != null) {
            let {value5, value2, value1, value4, value3} = retObj.data;
            if (type == 1) {//日
              let xDay = value1.map((param) => {
                return `${param.split('-')[1]}月${param.split('-')[2]}日`;
              });
              this.chartData.day.xData = xDay;
              this.chartData.day.spontaneousData = value2;//自发注册
              this.chartData.day.salesmanData = value4;//业务员邀请
              this.chartData.day.residentData = value5;//驻厂邀请
              this.chartData.day.employeeData = value3;//普通员工邀请
              this.impData = this.chartData['day'];
            } else if (type == 2) {//周
              let xWeek = value1.map((param) => {
                let preWeek = param.split('#')[0];
                let nextWeek = param.split('#')[1];
                return `${preWeek.split('-')[1]}月${preWeek.split('-')[2]}日-${nextWeek.split('-')[1]}月${nextWeek.split('-')[2]}日`;
              });

              this.chartData.week.xData = xWeek;
              this.chartData.week.spontaneousData = value2;
              this.chartData.week.salesmanData = value4;
              this.chartData.week.residentData = value5;
              this.chartData.week.employeeData = value3;
              this.impData = this.chartData['week'];
            } else if (type == 3) {//月
              let xMonth = value1.map((param, index) => {
                let temp = '';
                if (index == value1.length - 1) {
                  let current = formatDate(new Date(), 'dd日');
                  temp = `${param.split("-")[1]}月(至${current}数据)`;
                } else {
                  temp = `${param.split("-")[1]}月`;
                }
                return temp;
              });

              this.chartData.month.xData = xMonth;
              this.chartData.month.spontaneousData = value2;
              this.chartData.month.salesmanData = value4;
              this.chartData.month.residentData = value5;
              this.chartData.month.employeeData = value3;
              this.impData = this.chartData['month'];
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .register-data {
    background: #F0F2F5;
    .chart-box {
      padding: 20px;
      .line-chart {
        height: 720px;
        background: #fff;
        margin-bottom: 20px;
        .chart-title {
          font-size: 18px;
          font-weight: bold;
          color: rgba(61, 68, 77, 1);
          padding-top: 30px;
          padding-bottom: 35px;
          padding-left: 24px;
        }
        .time-type {
          display: flex;
          margin-left: auto;
          margin-right: 48px;
          width: 120px;
          height: 24px;
          background: rgba(240, 242, 245, 1);
          border: 1px solid rgba(216, 220, 229, 1);
          border-radius: 4px;
          margin-bottom: 8px;
          .time-block {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
            border-right: 1px solid rgba(216, 220, 229, 1);
            cursor: pointer;
            font-size: 12px;
            color: rgba(96, 98, 102, 1);
            &.positive {
              background: rgba(60, 175, 255, 1);
              color: #fff;
            }
            &:last-child {
              border-right: none;
            }
          }
        }
      }
      .pie-chart {
        height: 400px;
        background: #fff;
        margin-bottom: 20px;
        .chart-title {
          font-size: 18px;
          font-weight: bold;
          color: rgba(61, 68, 77, 1);
          padding-top: 30px;
          padding-bottom: 48px;
          padding-left: 24px;
        }
        &-data {
          display: flex;
          height: 300px;
          background: #fff;
          .pie-chart-cell-box {
            display: flex;
            align-items: center;
            padding-bottom: 28px;
            .pie-chart-cell-color {
              width: 12px;
              height: 12px;
              background: rgba(60, 175, 255, 1);
            }
            .pie-chart-cell-title {
              margin-left: 16px;
              font-size: 14px;
              color: rgba(61, 68, 76, 1);
            }
            .cell-color3 {
              background: rgba(8, 204, 132, 1);
            }
            .cell-color2 {
              background: rgba(30, 215, 222, 1);
            }
            .cell-color4 {
              background: rgba(255, 203, 61, 1);
            }
          }
          &-legend1 {
            display: flex;
            flex-direction: column;
            padding-left: 60px;
            padding-top: 60px;
            .chart-total {
              font-size: 16px;
              font-weight: bold;
              color: rgba(60, 175, 255, 1);
              padding-top: 6px;
            }
            @media screen and (min-width: 1280px) and(max-width: 1440px) {
              padding-left: 40px;
            }
          }
          &-legend2 {
            display: flex;
            flex-direction: column;
            padding-left: 120px;
            padding-top: 60px;
            @media screen and (min-width: 1280px) and(max-width: 1440px) {
              padding-left: 40px;
            }
          }
        }
      }
    }
  }
</style>
